<template>
  <div class="page">

      <div class="message_info" v-for="(val, idx) in articleList"  @click="godetails(val.id)">
        <div class="">
          <div class="bigtit">{{ val.title }}</div>
          <div class="smalltit">
            {{ val.content }}
          </div>
          <div class="time">{{ val.createTime }}</div>
        </div>
        <img :src="val.coverImgUrl" alt="" />
      </div>

  </div>
</template>
<script>
import { getCmsArticleList } from "@/api/api";
import { getDeptInfo } from "@/api/api";
export default {
  data() {
    return {
      articleList: [],
    };
  },
  created() {
    this.getCmsArticleList(this.$route.query.id);
  },
  methods: {
    getCmsArticleList(channelId) {
      var data = {
        channelId,
      };
      getCmsArticleList(data).then((res) => {
        if (res.code == 200) {
          this.articleList = res.data;
        }
      });
    },
    godetails(id){
      this.$router.push({path:"/message_details",query:{
          id
        }})
    }
  },
};
</script>
<style lang="less">
.message_head {
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3.4375rem;
  background-color: #f7fafd;
}

.message_head > div {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
}

.message_head > div:nth-of-type(1) > span {
  width: 4px;
  height: 15px;
  background: rgba(90, 173, 251, 1);
  border-radius: 2px;
  margin-right: 0.8125rem;
  margin-top: 0.3125rem;
}

.message_head > div:nth-of-type(1) > div {
  font-weight: bold;
}

.message_head > div:nth-of-type(2) > span {
  font-size: 0.8125rem;
  color: #adb5c4;
  margin-right: 0.75rem;
}

.message_head > div:nth-of-type(2) > img {
  display: block;
  width: 0.5rem;
  height: 0.875rem;
}
.message_info {
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.0625rem solid #e7ecf5;
  > img {
    width: 120px;
    height: 90px;
    border-radius: 6px;
    margin-left: 0.625rem;
    object-fit: cover;
  }
  > div {
    width: calc(~'100% - 8.125rem');
    .bigtit {
      width: 100%;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #131a2a;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .smalltit {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #3f4551;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .time {
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #a4adbe;
    }
  }
}
.message_info:last-of-type{
  border-bottom: none;
}
</style>
